<template>
  <view class="status-set">
	  <custom-navi :show-home="false">营业状态修改<view class="putin" @click="upData">提交</view></custom-navi>
	  <view class="status-set-list">
	  		<view v-for="(item,index) in radioList" :key='index' class="list" @click="radioChange($event,index)">
	  			<label class="radio">
	  				<radio :value="item.id" :checked="index === current" class="hl" color='rgba(12, 212, 211, 1)' style="transform:scale(0.6)"/><text>{{item.txt}}</text>
	  			</label>
	  		</view>
	  </view>
	 <!-- <view class="status-set-upImg">
	  	<view class="status-set-upImg-head">
	  		<view>
	  			上传图片：
	  		</view>
			<view>
				示例图
			</view>
	  	</view>
		<view class="status-set-upImg-img">
			<view class="upload">
			  <view
			    v-for="(item,index) in imgList"
			    :key="index"
			    class="upload-child"
			    @tap="handleImgDetailSet(index)"
			  >
			    <image :src="item.url" mode="widthFix" />
			  </view>
			  <view v-if="imgList.length<1" class="addPhoto" @tap="handlerImg"><text class='cuIcon-cameraadd'></text></view>
			</view>
			<image-cropper :src="cj" @confirm="confirm" @cancel="cancel"></image-cropper>
			<view class="text">
				请按照以上的要求提供举证，否则可能无法深刻
				通过，修改多个内容需要上传相同资质的，只需
				上传一次
			</view>
		</view>
	  </view>
	  <view class="replenish">
		<view class="replenish-title">
			补充说明：
		</view>
		<view class="replenish-text">
			<textarea value="" maxlength="150" @input="handlePopTxt" placeholder="请提供修改以上信息的原因，帮助工作人员合适，150字以内" class="txt"/>
			<view class="counts">
				{{count}}/150
			</view>
		</view>
	  </view> -->
   <!-- <custom-navi :show-home="false">营业状态修改</custom-navi>
      <image :src="shopInfo.defaultHead" class="headImg"  v-if="shopInfo.defaultHead"></image>
    <image src="/static/tabbar/common_ic_jilu_red.png" class="headImg" v-if="!shopInfo.defaultHead"></image>
    <view class="big-title">{{status===1?'营业中':'休息中'}}</view>
    <view class="time">
      <view>营业时间：{{shopInfo.openingTime}} -{{shopInfo.closingTime}}</view>
      <image src="/static/writd.png" mode='widthFix'></image>
    </view>
    <view class="sm-title" v-if="status===1">当前餐厅处于设置的营业时间内，正常接受 新的预定</view>
    <view class="sm-title" v-if="status===2">当前餐厅处于设置的营业时间内，正常接受 新的预定</view>
    <view class="btn">
      <button @tap='handleSubmit'>{{status===1?'停止营业':'回复营业'}}</button>
    </view> -->
  </view>
</template>

<script>
import CONSTS from '@/src/consts';
import { changeInformation,updateState } from '../../api'
import ImageCropper from "../../components/invinbg-image-cropper/invinbg-image-cropper.vue";
export default {
	components: { ImageCropper },
  data() {
    return {
      status:1,
      shopInfo:{},
	  current: 0,
	  count:'0',
	  cj: '',
	  imgList: [],
	  radioList:[
		  {txt:'营业中',id:'1'},
		  {txt:'休息中',id:'2'},
		  // {txt:'筹建中',id:'2'},
		  // {txt:'已关门',id:'3'}
	  ]
    }
  },
  onLoad(option){
    console.log(option.status)
	if(option.status==1){
		this.current=0
		this.shopInfo.businessState=1
	}else{
		this.current=1
		this.shopInfo.businessState=2
	}
    const _self = this
    uni.getStorage({
      key: 'shopInfo',
      success: function (res) {
        _self.shopInfo = res.data
        _self.status=_self.shopInfo.businessState
      }
    });
  },
  methods: {
	  // upData(){
		  
		 //  console.log('**提交**')
	  // },
	  radioChange(e,index){
		  this.current=index
		  // console.log(e)
		  if(index===0){
			  this.shopInfo.businessState=1
		  }else{
			  this.shopInfo.businessState=2
		  }
		  // this.shopInfo.businessState
	  },
	  handlerImg () {
	    const _self = this
	    uni.chooseImage({
	      count: 3, //默认9
	      sizeType: ['original', 'compressed'],
	      sourceType: ['album'],
	      success: function (res) {
	        const tempFilePaths = res.tempFilePaths;
	        uni.uploadFile({
	          url: CONSTS.BASE_URL + '/basic/upload/single/store',
	          // url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
	          filePath: tempFilePaths[0],
	          name: 'file',
	          formData: {
	            'user': 'test'
	          },
	          success: (uploadFileRes) => {
	            const res = JSON.parse(uploadFileRes.data)
	  
	            _self.cj = CONSTS.BASE_URL + '/basic' + res.data
	          }
	        });
	      }
	    })
	  },
	  confirm (e) {
	    this.cj = ''
	    const _self = this
	    uni.uploadFile({
	      url: CONSTS.BASE_URL + '/basic/upload/single/store',
	      filePath: e.detail.tempFilePath,
	      name: 'file',
	      formData: {
	        'user': 'test'
	      },
	      success: (uploadFileRes) => {
	        const res = JSON.parse(uploadFileRes.data)
	  
	        const imgMode = {
	          url: CONSTS.BASE_URL + '/basic' + res.data,
	          path: res.data,
	          title: ""
	        }
	        _self.imgList.push(imgMode)
	  	  // console.log(_self.imgList)
	      }
	    });
	  },
	  cancel () {
	    console.log('canceled')
	  },
	  handleImgDetailSet (index) {
	  	const _self = this
	  	uni.chooseImage({
	  	  count: 3, //默认9
	  	  sizeType: ['original', 'compressed'],
	  	  sourceType: ['album'],
	  	  success: function (res) {
	  	    const tempFilePaths = res.tempFilePaths;
	  	    uni.uploadFile({
	  	      url: CONSTS.BASE_URL + '/basic/upload/single/store',
	  	      // url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
	  	      filePath: tempFilePaths[0],
	  	      name: 'file',
	  	      formData: {
	  	        'user': 'test'
	  	      },
	  	      success: (uploadFileRes) => {
	  	        const res = JSON.parse(uploadFileRes.data)
	  				
	  	        _self.cj = CONSTS.BASE_URL + '/basic' + res.data
	  			_self.imgList.splice(index,1)
	  			// console.log(_self.imgList)
	  	      }
	  	    });
	  	  }
	  	})
	  	
	  },
	 handlePopTxt(e){
	 	// console.log(e.detail.value)
	 	// this.form.content=e.detail.value
	 	this.count=e.detail.value.length
	 },
	
	
	
 //    handleParams () {
 //      // if(this.status===1){
 //      //   this.shopInfo.businessState=2
 //      // }else{
 //      //   this.shopInfo.businessState=1
 //      // }
 //      let paramsUrl = `id=${this.shopInfo.id}&status=${this.shopInfo.businessState}`
 //      return paramsUrl
 //    },
	
	
    async upData () {
		let params = {
		  status:this.shopInfo.businessState,
		  id:this.shopInfo.id
		}

      // let url = `/merchant/app/store/updateState?${this.handleParams()}`
      try {
        const { data } = await updateState(params)
        this.status=this.shopInfo.businessState
         this.$utils.common.toast.fail('修改成功');
         setTimeout(() => {
          return this.$utils.common.navigateBack()
        }, 1000)
      } catch (err) {
        console.log(err)
        if (err.code && err.statusCode) {
          if (err.code !== 200) {
            return this.$utils.common.toast.fail(err.data.message);
          }
          return this.$utils.common.toast.fail(err.errMsg);
        }
      }
    }
  },

}
</script>

<style lang="scss" scoped>
.status-set {
  display: flex;
  flex-direction: column;
  align-items: center;
  // background-color: #ffffff;
  height: 100vh;
  .putin{
	  position: absolute;
	  top: 0;
	  right: 32rpx;
	  font-size:30rpx;
	  font-family:PingFang SC;
	  font-weight:500;
	  color:rgba(255,255,255,1);
	  opacity:1;
	  line-height: 44rpx;
  }
  .replenish{
	  width: 100%;
	  margin-top: 20rpx;
	  background-color: #ffffff;
	  padding: 32rpx;
	  &-title{
		  font-size:32rpx;
		  font-family:PingFang SC;
		  font-weight:bold;
		  color:rgba(80,80,80,1);
		  opacity:1;
	  }
	  &-text{
		  height: 200rpx;
		  margin-top: 20rpx;
		  position: relative;
		  .txt{
		  	width: 680rpx;
		  	height: 160rpx;
		  	font-size:28rpx;
		  	font-family:PingFang SC;
		  	font-weight:400;
		  	// color:rgba(179,179,179,1);
		  	opacity:1;
		  }
		  .counts{
		  	position: absolute;
		  	right: 0rpx;
		  	bottom: 10rpx;
		  	font-size:28rpx;
		  	font-family:PingFang SC;
		  	font-weight:400;
		  	color:rgba(153,153,153,1);
		  	opacity:1;
		  }
	  }
  }
  &-list{
	  width: 100%;
	  padding: 0 32rpx;
	  background-color: #ffffff;
	  .list{
		  height: 100rpx;
		  border-bottom: 1rpx solid rgba(230, 230, 230, 1);
		  line-height: 100rpx;
		  text{
			  margin-left: 14rpx;
			  font-size:28rpx;
			  font-family:PingFang SC;
			  font-weight:bold;
			  color:rgba(80,80,80,1);
			  opacity:1;
		  }
	  }
	  .list:last-child{
		  border: none;
	  }
  }
  &-upImg{
	  width: 100%;
	  margin-top: 20rpx;
	  padding: 32rpx;
	  background-color: #ffffff;
	&-head{
		display: flex;
		align-items: center;
		view{
			font-size:32rpx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(80,80,80,1);
			opacity:1;
		}
		view:last-child{
			margin-left: auto;
			font-size:32rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(12,212,211,1);
			opacity:1;
		}
	}
	&-img{
		display: flex;
		.text{
			padding:32rpx 30rpx 0 0;
			width:504rpx;
			height:92rpx;
			font-size:24rpx;
			font-family:PingFang SC;
			font-weight:400;
			line-height:30rpx;
			color:rgba(179,179,179,1);
			opacity:1;
		}
		.upload {
		  padding: 32rpx 30rpx 0 30rpx;
		  display: flex;
		  flex-wrap: wrap;
		  background-color: #ffffff;
		  margin-bottom: 20rpx;
		  &-child {
		    position: relative;
		    margin: 2rpx;
			width: 132rpx;
			height: 132rpx;
			margin-right: 10rpx;
			overflow: hidden;
		    image {
		      width: 132rpx;
			  height: 132rpx;
		    }
		    &-title {
		      position: absolute;
		      bottom: 6rpx;
		      width: 100%;
		      padding: 24rpx;
		      padding-bottom: 18rpx;
		      color: #ffffff;
		      text-overflow: ellipsis;
		      overflow: hidden;
		      background: linear-gradient(
		        180deg,
		        rgba(113, 113, 113, 0) 0%,
		        rgba(0, 0, 0, 0.33) 33%,
		        rgba(3, 3, 3, 1) 100%
		      );
		    }
		  }
		  .addPhoto {
		    margin: 2rpx;
		    width: 132rpx;
		    height: 132rpx;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    background: rgba(242, 242, 242, 1);
		    border: 1rpx solid rgba(230, 230, 230, 1);
		    font-size: 106rpx;
			overflow: hidden;
			text{
				font-size:52rpx
			}
		  }
		}
		
	}
  }
}
</style>